<!-- <template>
<view class="">
	  <el-calendar @click-date="handleDateClick()">
	
	    <template #date-cell="{ data }">
	      <p :class="data.isSelected ? 'is-selected' : ''">
	        {{ data.day.split('-').slice(2).join() }}
	
	        {{ data.isSelected ? '✔️' : '' }}
	      </p>
	    <p v-show="panduan(data.day)">{{panduan(data.day)}}</p>
	    </template>
	  </el-calendar>
</view>
</template>

<script>

	export default {
		components: {},
	
		data(){
			return {
				selectedDate:'',
			  tabledata:[
			        {
			          data:"2024-12-16",
			          id:1
			        }
			      ],
				 
				  planlist:[
					  
				  ]
				 
		}},
		onLoad() {
			this.getplan()
		},
		methods:{
			 handleDateClick(day) {
				 console.log(1)
			      this.selectedDate = day; // 保存选中的日期
			      console.log(this.selectedDate)
			    },
			getplan(){
				const parmas={
					id:1
				}
				uni.request({
					url:"http://localhost:8082/history/selall",
					method:"POST",
					data:{id:1},
							 header:{'content-type':'application/x-www-form-urlencoded'},
							 success: (res) => {
							this.tabledata=res.data.data
							console.log(this.tabledata[0].settime.substring(0,10));
							// console.log(this.list);
							  console.log(res.data)
							 }
					})
				},
				panduan(day){
					for(let a=0;a<this.tabledata.length;a++)
					{
						if(this.tabledata[a].settime.substring(0,10)===day)
						{
						  return this.tabledata[a].id
						}
					}
				}
			}
		}
		
		
	
</script>



 -->

<template>
  <view class="container">
    <!-- 日历组件 -->
    <uni-calendar
      v-model="showCalendar"
      @change="onDateChange"
    ></uni-calendar>

    <!-- 自定义弹框 -->
    <view class="modal" v-if="showDialog" @click="closeDialog">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <view class="modal-title">  <h2>{{trainingContent.mouldname}}</h2></view>
          <view class="modal-date">{{ selectedDate }}</view>
        </view>
		<view class="modal-body">
    <view v-if="trainingContent" class="content-scroll">
      <view 
        v-for="(item,index) in trainingContent.groups" 
        :key="index" 
        class="exercise-group"
      >
        <view class="exercise-header">
          <text class="exercise-name">{{item.name}}</text>
          <view class="exercise-sets">共 {{item.miniGroups.length}} 组</view>
        </view>
        
        <view class="set-list">
          <view 
            v-for="(item1,index1) in item.miniGroups" 
            :key="index1" 
            class="set-item"
            :class="{'last-set': index1 === item.miniGroups.length - 1}"
          >
            <text class="set-order">第 {{item1.order}} 组</text>
            <text class="set-weight">{{item1.weight}} kg</text>
            <text class="set-reps">{{item1.number}} 次</text>
          </view>
        </view>
      </view>
      
      <view class="action-buttons">
        <button class="delete-button" @click="delplan">删除计划</button>
      </view>
    </view>
    <text v-else class="no-content">暂无训练内容</text>
  </view>
		
  
        <view class="modal-footer">
          <button v-if="!trainingContent" class="add-plan-button" @click="addTrainingPlan">导入模版集</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		tabledata:[],
      showCalendar: false, // 控制日历弹窗的显示与隐藏
      showDialog: false, // 控制自定义弹框的显示与隐藏
      selectedDate: '', // 选中的日期
      trainingContent: '', // 该天的训练内容
	  mobanList:[],//获取的模版列表
    };
  },
    onShow() {
      // 每次页面显示时执行数据刷新
      this.getmoban();
	  this.getplan()
    },
  onLoad() {
  	this.getplan()
	this.getmoban()
  },
  methods: {
    // 日历日期变化时触发
    onDateChange(e) {
      // console.log('选中的日期:', e);
      this.selectedDate = e.fulldate; // 获取选中的日期
      this.showCalendar = false; // 关闭日历弹窗
	  this.findtrianContent();
      this.showDialog = true; // 显示自定义弹框

      // 模拟获取该天的训练内容
      // this.trainingContent = this.getTrainingContentForDate(this.selectedDate);
    },
    // 模拟获取训练内容
    getTrainingContentForDate(date) {
      // 这里可以根据实际逻辑从数据库或状态管理中获取训练内容
      // 示例：根据日期返回不同的训练内容
      const trainingData = {
        '2025-05-18': '跑步 5 公里，仰卧起坐 3 组',
        '2025-05-19': '游泳 1 小时，俯卧撑 20 次',
      };
      return trainingData[date] || '';
    },
    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
	  this.trainingContent=''
    },
    // 添加训练计划
    addTrainingPlan() {
      console.log('添加训练计划:', this.selectedDate);
      // 这里可以跳转到添加训练计划的页面或弹出表单
	  uni.navigateTo({
	  	url:"/pages/mymould/mymould?Date="+this.selectedDate
	  })
      this.closeDialog(); // 关闭当前弹框
    },
	findtrianContent(){    //找与日期匹配的训练内容
		for(let i=0;i<this.tabledata.length;i++)
		{
			if(this.selectedDate==this.tabledata[i].settime.substring(0,10))
			{     console.log(this.tabledata[i].mouldid);
				this.trainingContent=this.findonemoban(this.tabledata[i].mouldid)
				// console.log(111);
			}
		}
	},
	getplan(){
		const parmas={
			id:1
		}
		uni.request({
			url:"http://localhost:8082/history/selall",
			method:"POST",
			data:{id:1},
					 header:{'content-type':'application/x-www-form-urlencoded'},
					 success: (res) => {
					this.tabledata=res.data.data
					console.log(this.tabledata[0].settime.substring(0,10));
					// console.log(this.list);
					  console.log(res.data)
					 }
			})
		},
		getmoban(){
									  uni.request({
									  	url:'http://localhost:8080/mould/select',
										method:'POST',
										 data:{
											 id:1
											 },
											 header:{'content-type':'application/x-www-form-urlencoded'},
										 success: (res) => {
										 	console.log(res)
											this.mobanList=res.data.data
											console.log(this.mobanList)
										 }
									  })
		},
		findonemoban(mouldid){
			for(let i=0;i<=this.mobanList.length;i++){
				if(this.mobanList[i].mouldid==mouldid)
				{       console.log(this.mobanList[i]);
					return this.mobanList[i]
				}
				
			}
		},
		findhistoryid(){
			for(let i=0;i<this.tabledata.length;i++)
			{
				if(this.selectedDate==this.tabledata[i].settime.substring(0,10))
				{     console.log(this.tabledata[i].id);
					return this.tabledata[i].id
					// console.log(111);
				}
			}
		},		
		delplan(){
			uni.request({
				url:"http://localhost:8082/history/delete",
				method:"POST",
				data:{
					id:this.findhistoryid(),
				},
				header:{
					'content-type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					console.log(res.data);
					this.getplan()
					 this.closeDialog();
				}
			})
		}
		
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  height: 70%;
  max-width: 400px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
}

.modal-date {
  font-size: 14px;
  color: #888;
}

.modal-body {
  padding: 10px 0;
  max-height: 60vh;
  overflow-y: auto;
}

.exercise-group {
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.exercise-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.exercise-sets {
  font-size: 12px;
  color: #666;
  background-color: #e0e0e0;
  padding: 2px 8px;
  border-radius: 10px;
}

.set-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.set-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background-color: white;
  border-radius: 6px;
  font-size: 14px;
}

.set-item:not(.last-set) {
  margin-bottom: 5px;
}

.set-order {
  color: #666;
  width: 60px;
}

.set-weight {
  color: #007aff;
  font-weight: bold;
  width: 60px;
  text-align: center;
}

.set-reps {
  color: #ff6b6b;
  font-weight: bold;
  width: 60px;
  text-align: right;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.delete-button {
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
}

.no-content {
  display: block;
  text-align: center;
  color: #999;
  padding: 20px 0;
  font-size: 14px;
}
/* .training-content {
  font-size: 14px;
  color: #333;
} */

.no-content {
  font-size: 14px;
  color: #888;
  text-align: center;
}

.modal-footer {
  text-align: center;
}

.add-plan-button {
  background-color: #007aff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}
.minigroup{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/* background-color: red; */
}
</style>